<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>我的卡券</title>
    <link rel="stylesheet" href="__STATIC_URL__/static/mobile/css/weui.css" />
    <link rel="stylesheet" href="__STATIC_URL__/static/mobile/mycord/css/cord.css?v=3" />
    <link rel="stylesheet" href="__STATIC_URL__/static/css/dropload.css" />
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
    }
    html { font-size: 14px; }
    img {max-width: 100%;}
    header {
        height: 40px;
        width: 100%;
        min-width: 320px;
        background: #98b1d7;
        text-align: center;
        color: #fff;
        font-size: 1.2rem;
        line-height: 40px;
    }
    footer {
        height: 52px;
        width: 100%;
        min-width: 320px;
        background: #98b1d7;
        text-align: center;
        color: #fff;
        font-size: 1.2rem;
        line-height: 52px;
        position: absolute;
        bottom: 0;
    }
    #wrapper {
        width: 100%;
        min-width: 320px;
        position: absolute;
        left: 0;
        top: 175px;
        bottom: 6px;
        overflow: hidden;
        z-index: 1;
        background-color: #eee;

        /* 防止本机Windows上的触摸事件 */
        -ms-touch-action: none;

        /* 防止callout tap-hold和文本的选择 */
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;

        /* 防止文本调整取向变化对web应用程序很有用 */
        -webkit-text-size-adjust: none;
        -moz-text-size-adjust: none;
        -ms-text-size-adjust: none;
        -o-text-size-adjust: none;
        text-size-adjust: none;
    }
    .pull-loading {
        text-align: center;
        height: 40px;
        line-height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #scroller ul li {
        padding: 20px 10px;
        border-bottom: solid 1px #ccc;
        background: #fff;
    }
/*************/
    .aft{

        content: " ";
        display: inline-block;
        height: 6px;
        width: 6px;
        border-width: 1px 1px 0 0;
        border-color: #1aad19;
        border-style: solid;
        -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
        transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
        margin-top: -4px;
    }
    .cardList{
        position: relative;
    }
    .cardLi {
        position: relative;
        height: auto;
    }

    .semi_circle1 {

        position: absolute;
        bottom: -1px;
        left:  -7px;
    }
    .cardtop {
        position: absolute;
        left: -26px;
        top: 11px;
        font-size: 12px;
    }
    .cardleft {
        margin-left: -18px;
        padding: 10px 0 10px 10px;
    }
    .cardR-top{
        border-bottom:none;
    }
    .cardR-conten p{
        color: #7B7B7B;
        font-size: 14px;
    }
    .cardName{
        white-space: nowrap;
        width: 140px;
        overflow: hidden;
        text-overflow:ellipsis;
    }

    .cardR-conten{
        padding-right: 20px;
    }
    .paycard {
        border: 1px solid #21ac35;
        padding:4px 7px 4px 0px;
        border-radius: 3px;
        width: 53px;
        display: inline-block;

    }
</style>
<body>

<div class="container" id="container">




    <div class="harder"style="background:url(__STATIC_URL__/static/mobile/mycord/img/logo_2.png);background-size:100% 100%;">


        <!-- <div class="hfooter">
            <div class="hfr">发现新大陆</div>
            <div class="arrow"></div>
        </div>-->
    </div>

    <div class="body">
        <div class="nav bc_white">
            <div class="default" id="selected" data-id="selected">
                <a href="{:url('cardmarketest/freecards',['card_id'=>$card['card_id']])}">
                    <img src="__STATIC_URL__/static/mobile/mycord/img/shang.png"class="icon"style="height:19px;padding-top:3px;"/>
                    <div class="ictext">本商户优惠券</div>
                </a>
            </div>
            <div class=" default" id="selected1" data-id="selected1">
                <a href="{:url('cardusertest/mecard',['card_id'=>$card['card_id']])}">
                    <img src="__STATIC_URL__/static/mobile/mycord/img/mycard.png"class="icon"/>
                    <div class="ictext">我的优惠券</div>
                </a>
            </div>
            <div class=" default red" id="selected2" data-id="selected2">
                <img src="__STATIC_URL__/static/mobile/mycord/img/quan.png"class="icon"/>
                <div class="ictext" id="id" data-id="{$user['card_id']}" data-code="{$user['code']}">未领取的优惠券</div>

            </div>
        </div>
        <div class="content">



            <div class="selected1" style="display:block" id="kind">

                <div id="kin" data-page=""></div>

                <div class="clear"></div>

            </div>
            <div class="selected2" id="zanwu" style="display:none">
                <div class="zanwu">
                    <img src="__STATIC_URL__/static/mobile/mycord/img/wu.png"class="wu"/>
                    <div>暂无优惠券，赶快来领取哦~~</div>
                </div>
            </div>
        </div>

    </div>
    <div class='cardWrap' id="Refresh">
        <img src="__STATIC_URL__/static/mobile/mycord/img/shuaxin.png"class="Refresh"/>
    </div>
</div>
<div id="loadingToast" style=" display: none;">
    <div class="weui-toast">
        <i class="weui-loading weui-icon_toast"></i>
        <p class="weui-toast__content">卡券领取中</p>
    </div>
</div>
</body>
<script src="__STATIC_URL__/static/jquery/3.2.1/jquery.min.js"></script>
<script src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script src="__STATIC_URL__/static/js/dropload.js"></script>
<script>

    $("#Refresh").click(function(){
        window.location.reload();
    })
</script>
<script>

</script>

    <script>
    $(document).ready(function(){
        //加载分页
        load();
    });
    function load() {
        var num = 5;
        var page = 1;
        var card_id=$("#id").attr("data-id");
        var code=$("#id").attr("data-code");
        var dropload = $('#kind').dropload({
            scrollArea:window,
            loadDownFn:function(me){

                $.ajax({
                    url: "{:url('cardgettest/getcardslists')}",
                    type: 'post',
                    dataType: 'json',
                    data:{
                        card_id:card_id,
                        code:code,
                        page:page
                    },
                    success: function (res) {
                        console.log(11,res);

                        var result = '';
                        var data=res.data.data;
                        var pagenum=parseInt(res.page_num);
                        var pages=parseInt(res.page);

                        if(data==""){
                            $("#zanwu").attr("style","display:block")
                        }
                        var html="";
                        var html3 ="";
                        var length=data.length;
                        if(data.code=='9002'){
                            me.lock();
                            // 无数据
                            me.noData();
                            me.resetload();
                            if(page ==1){
                                $(".dropload-down").css("display","none");//没有更多数据的文字
                            }
                        }else{
                            $("#zanwu").attr("style","display:none")

                            $(".dropload-load").show();
                            page++;
                            for(var i=0;i<length;i++){
                                url="{:url('cardget/getaddcard')}";
                                result += '<a href="javascript:;" class="clickself weui-media-box_appmsg" data-url=" '+ url +'" data-cardid="'+data[i].zs_card_id+'" data-givelogid="'+data[i].id+'">\n' +
                                    '                    <div class="cardList">\n' +
                                    '                        <div class="cardLi">\n' +
                                    '                            <div class="semi_circle"></div>\n' +
                                    '                            <div class="semi_circle1"></div>\n' +
                                    '                            <div class="cardtop">\n' +
                                    '                                <div class="top_row already">全部门店</div>\n' +
                                    '                            </div>\n' +
                                    '                            <div class="cardleft">\n' +
                                    '                                <img src="'+data[i].card_logo+'" mode="aspectFill" class="shopLogo"/>\n' +
                                    '                            </div>\n' +
                                    '                            <div class="cardRight flex">\n' +
                                    '                                <div class="cardR-top">\n' +
                                    '                                    <div class="cardR-top-left">\n' +
                                    '                                        <div class="shopName">'+data[i].card_title+'</div>\n' +
                                    '                                        <div class="cardName">'+data[i].brand_name+'</div>\n' +
                                    '                                        <div class="cardAddress">'+data[i].card_type+'</div>\n' +
                                    '                                    </div>\n' +
                                    '                                    <div class="cardR-top-right">\n' +
                                    '                                            <div class="cardAddress already" style="padding-right:10px;    margin-top:7px;"><span class="paycard">领取 <span class="aft"></span></span></div>\n' +
                                    '                                        <!--<div class=\'cardAddress \'style="margin-top:39%;">最近距离100km</div>-->\n' +
                                    '                                    </div>\n' +
                                    '                                </div>\n' +
                                    '                                <div class="cardR-bottom">\n' +
                                    '                                    <div class="cardR-bottom-left">\n' +
                                    '                                        <div class="overdue">'+data[i].create_time+'</div>\n' +
                                    '                                        <!--<div class=\'cardAddress orange\'>剩余263天</div>-->\n' +
                                    '                                    </div>\n' +
                                    '\n' +
                                    '                                </div>\n' +
                                    '                            </div>\n' +
                                    '                        </div>\n' +
                                    '                    </div>\n' +
                                    '                </a>';
                                if(length < 5 &&  i ==(length-1) && pages == pagenum){
                                    //console.log(pages,pagenum);
                                    // 锁定//表示一页未满已经没有数据
                                    me.lock();
                                    // 无数据
                                    me.noData();
                                    break;
                                }
                            }
                            $("#kin").append(result)
                            // me.noData();
                            //me.unlock();
                            me.resetload();
                        };
                    },
                    error: function (xhr, type) {
                        // 即使加载出错，也得重置
                        me.resetload();
                    }
                });
            }
        });
    }

</script>



<script type="text/javascript">
    $(function () {
//        console.log(window.location.pathname/window.location.protocol/window.location.host);
        $('#kin').on('click', '.clickself', function() {
            var $loadingToast = $('#loadingToast');

                if ($loadingToast.css('display') != 'none') return;

                $loadingToast.fadeIn(100);
                setTimeout(function () {
                    $loadingToast.fadeOut(100);
                }, 2000);

            console.log(132);
            var url = $(this).attr("data-url");
            var cardid = $(this).attr("data-cardid");
            var givelogid = $(this).attr('data-givelogid');
            console.log(url);
            $.post({
                url: url,
                data: {
                    card_id: cardid,
                    givelogid: givelogid,
                    url: window.location.href
                },
                success: function (data) {
                    console.log(data);
//                    return;
                    wx.config({
                        debug: false,
                        appId: data.jssdk.appId,
                        timestamp: data.jssdk.timestamp,
                        nonceStr: data.jssdk.nonceStr,
                        signature: data.jssdk.signature,
                        jsApiList: [
                            'addCard'
                        ]
                    });
                    wx.ready(function () {
                        wx.addCard({
                            cardList: [
                                {
                                    cardId: cardid,
                                    cardExt: data.card.ext
                                }
                            ],
                            success: function (res) {
                                window.location.replace("{:url('cardget/cardgetsuccess')}")
                            },
                        });
                    });
                }
            })
        })
    });
</script>

</html>
